<template>
  <article class="col-7 fl">
    <div class="u-r-cont">
      <section>
        <div>
          <section class="c-infor-tabTitle c-tab-title">
            <a href="javascript: void(0)" title="我的订单" class="current">
              订单列表
            </a>
          </section>
        </div>
        <div class="mt40">
          <section class="no-data-wrap" v-if="orderList.length === 0">
            <em class="icon30 no-data-ico">&nbsp;</em>
            <span class="c-666 fsize14 ml10 vam">您还没有订单哦！</span>
          </section>

          <!-- 表格 -->
          <el-table
            v-if="orderList.length > 0"
            border
            :data="orderList"
            fit
            highlight-current-row
          >
            <el-table-column label="课程信息" align="center" prop="courseTitle">
            </el-table-column>
            <el-table-column
              label="讲师名称"
              width="100"
              align="center"
              prop="teacherName"
            >
            </el-table-column>
            <el-table-column
              label="价格"
              width="100"
              align="center"
              prop="totalFee"
            >
            <template slot-scope="scope">
              {{ scope.row.totalFee }}
            </template>
            </el-table-column>
            <el-table-column label="创建时间" prop="gmtCreate" width="180" align="center">
            </el-table-column>
            <el-table-column
              prop="status"
              label="订单状态"
              width="100"
              align="center"
            >
              <template slot-scope="scope">
                <el-tag type="danger" v-if="scope.row.status === 0"> 未支付</el-tag>
                <el-tag v-else>已支付</el-tag>
              </template>
            </el-table-column>

            <el-table-column label="操作" width="150" align="center">
              <template slot-scope="scope">
                <el-button type="primary" size="mini" v-if="scope.row.status === 0" @click="$router.push({path: `/order/${scope.row.id}`})">去支付</el-button>
                <i class="el-icon-delete" @click="deleteOrder(scope.row.id)" style="cursor:pointer;"></i>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </section>
    </div>
  </article>
</template>

<script>
import ucenterApi from "~/api/ucenter/ucenter";
import cookie from "js-cookie";

export default {
  data() {
    return {
      orderList: [],
    };
  },
  created() {
    let token = cookie.get("guli-cookie-jwt");
    if (!token) {
      // this.$router.push({path: '/'})
      // this.$message.error("请先登录！")
      return false;
    }

    this.findAll()

  },
  methods: {
    // 删除订单
    deleteOrder(orderId) {
       this.$confirm('删除该订单, 是否继续?', '提示', {
          confirmButtonText: '删除',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          // 删除订单
          ucenterApi.deleteOrder(orderId)
            .then((result) => {
              // 刷新页面
              this.findAll()
            })
        })
    },
    // 查询这个用户的所有订单信息
    findAll() {
      ucenterApi.getBasicInfo().then((result) => {
        if (result.code === 20000) {
          this.orderList = result.data;
        }
      });
    }

  },
};
</script>
